<script setup lang="ts"></script>

<template>
  <div class="app">
    <header class="app-header">
      <h1>微信读书 · H5</h1>
    </header>
    <main class="app-main">
      <router-view />
    </main>
    <nav class="app-tabbar">
      <a href="#/" class="tab">书库</a>
      <a href="#/marks" class="tab">标记</a>
    </nav>
  </div>
</template>

<style scoped>
.app {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-header {
  padding: 12px 16px;
  border-bottom: 1px solid #e5e5e5;
  background: #fff;
}

.app-header h1 {
  font-size: 18px;
  margin: 0;
}

.app-main {
  flex: 1;
  overflow: auto;
  background: #f7f7f7;
}

.app-tabbar {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid #e5e5e5;
  background: #fff;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  color: #333;
  text-decoration: none;
}
</style>
